require(['config'], () => {
    require(['jquery', 'header', 'footer'], () => {
    // class Show {
    //     constructor() {
    //         this.aBtn = document.querySelector('ul').children
    //         this.aCon = document.querySelector('.con').children
    //         this.init()
    //     }
    //     init(){
    //         this.tab()
    //     }
    //     tab(){
    //         // this.aBtn.length.forEach(item => {
    //         //     this.aBtn
    //         // })




    var aBtn = document.getElementById('num').children
    var aCon = document.getElementById('con').children
    console.log(aBtn);
            for(var i=0; i<aBtn.length; i++){
                //自定义属性（隐式方式，自定义属性设置了在标记上面看不到，但是不可以使用）
                aBtn[i].index = i
                aBtn[i].onclick = function(){
                    //获取自定义属性
                    var index = this.index
            
                    /*
                        排他思想
                        + 先干掉所有人，只留下他自己
                        + 在设置样式之前，先把之前所有元素的样式给清除掉（无论之前有样式还是没有样式）
    
                        规律：
                        + 获取到的按钮（li标记）和 内容（div）都是一个伪数组
                          => 可以使用下标
                        + 两个伪数组的下标都是一样的，当点击那个按钮的时候，把对应的下标给div即可
                          => console.log(aBtn[1])
                          => console.log(aCon[1])
                    */
                    for(var j=0; j<aBtn.length; j++){
                        aBtn[j].className = ''
                        aCon[j].className = ''
                    }
                    this.className = 'active'
                    aCon[index].className = 'show'
                }
            }
    //     }
    // }
    //         new Show()
        })
})